import './App.css';
import './common.css';
import { useEffect } from 'react'

const App = () => {
  useEffect(() => {
    const body = document.body;
    const root = document.querySelector('#root');
    const outer = document.querySelector('#outer');
    const inner = document.querySelector('#inner');

    document.addEventListener('click', () => {
      console.log('document 捕获');
    }, true);

    document.addEventListener('click', () => {
      console.log('document 冒泡');
    }, false);

    body.addEventListener('click', () => {
      console.log('body 捕获');
    }, true);

    body.addEventListener('click', () => {
      console.log('body 冒泡');
    }, false);

    root.addEventListener('click', () => {
      console.log('root 捕获');
    }, true);

    root.addEventListener('click', () => {
      console.log('root 冒泡');
    }, false);


    outer.addEventListener('click', () => {
      console.log('outer 捕获 [原生]');
    }, true);

    outer.addEventListener('click', () => {
      console.log('outer 冒泡 [原生]');
    }, false);

    inner.addEventListener('click', () => {
      console.log('inner 捕获 [原生]');
    }, true);

    inner.addEventListener('click', () => {
      console.log('inner 冒泡 [原生]1');
    }, false);

  }, []);
  return <>
      <div id="outer" className='center'  onClick={() =>{
           console.log('outer 冒泡 [合成]');
          }}
          onClickCapture={() =>{
            console.log('outer 捕获 [合成]');
          }}
        >

        <div id="inner" className='center'  onClick={() =>{
            console.log('inner 冒泡 [合成]');
          }}
          onClickCapture={() =>{
            console.log('inner 捕获 [合成]');
          }}>
        </div>
      </div>
  </>
};

export default App;
